<template>
    <span @click.stop="change" :class="[status?'active':'','mine-checkbox']">
    	<i></i>
    </span>
</template>
<script>
	
	/*ds:datasorse string
	 *kw:keyword string
	 *getStatus:func
	 * */
    export default {
    	data:function(){
    		return{
    			status: (this.ds&&String(this.kw).length)>0?this.ds[this.kw]:(this.initStatus||false)
    		}
    	},
    	props:['initStatus','getStatus',"kw",'ds','path'],
    	methods:{
    		change(){
    			this.status = !this.status;
    			this.getStatus(
    				this.status,
    				this.kw,
    				this.ds,
    				this.path
    			);
    		}
    	}
    };
    
</script>
<style lang="css">
.mine-checkbox{
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: solid 1px #cccccc;
	vertical-align: bottom;
	cursor: pointer;
}
.mine-checkbox.active{
	border: none;
}
.mine-checkbox i{
	display: inline-block;
	height: 100%;
	width: 100%;
	background: transparent url(../assets/img/icon/mine-radio.png) no-repeat center / 18px 18px;
	opacity: 0;
}
.mine-checkbox.active i{
	opacity: 1;
}
</style>
